<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>el与data的两种写法</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div id="demo">
            <h1>一言: {{name}}</h1>
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false;

        // el的第一种写法
        // #region
        // new Vue({
		// 	el:'#demo',
		// 	data:{
		// 		name:'自己选择的路，再荒谬也要走完！'
		// 	}
		// })
        // #endregion

        // el的第二种写法
        // #region
        // const vm = new Vue({
		// 	data:{
		// 		name:'为遇一人而入红尘，人去我亦去，此生不留尘'
		// 	}
		// })
		// vm.$mount('#demo')
        // #endregion

        // 对象式
        // #region
        // new Vue({
		// 	el:'#demo',
		// 	data:{
		// 		name:'恐惧意味着“软弱”。'
		// 	}
		// })
        // #endregion

        // 函数式
        // #region
        new Vue({
			el:'#demo',
			data(){
				console.log(this)
				return {
					name:'如果你是我该多好，那你就会知道我有多难过，多喜欢你。'
				}
			}
		})
        // #endregion
        
    </script>
</html>